<template>
  <div class="reading-container">
    <!-- 页面头部 -->
    <header class="page-header">
      <div class="quiz-info">
        <span>文章主题: {{ articleTitle }}</span>
        <span class="separator">|</span>
        <span>题目数量: {{ questions.length }} 题</span>
        <span class="separator">|</span>
        <span>已完成: {{ completedCount }}</span>
        <span v-if="isSubmitted" class="separator">|</span>
        <span v-if="isSubmitted" class="score">得分: {{ score }} / {{ questions.length * 20 }}</span>
      </div>
    </header>

    <!-- 左右布局内容区 -->
    <div class="content-wrapper">
      <!-- 左侧：阅读文章区域 -->
      <div class="article-section">
        <!-- 右上角按钮组 -->
        <div class="top-right-buttons">
          <button
              @click="increaseFontSize"
              class="action-btn edit" title="">
            <el-icon size="20"><ZoomIn /></el-icon>
          </button>
          <button
              @click="decreaseFontSize"
              class="action-btn delete" title="">
            <el-icon size="20"><ZoomOut /></el-icon>
          </button>
          <button
              @click="resetFontSize"
              class="action-btn setting" title="">
            <el-icon size="20"><Refresh /></el-icon>
          </button>
          <button
              @click="audioMessage"
              class="action-btn delete" title="">
            <el-icon size="20"><VideoPlay /></el-icon>
          </button>
          <button
              @click="stopMessage"
              class="action-btn edit" title="">
            <el-icon size="20"><VideoPause /></el-icon>
          </button>
        </div>

        <h2>阅读文章</h2>
        <div class="article-content" :style="{ fontSize: currentSize + 'px' }">
          <p v-for="(paragraph, index) in articleContent" :key="index">
            {{ paragraph }}
          </p>
        </div>
      </div>

      <!-- 右侧：题目区域 -->
      <div class="questions-section">
        <h2>阅读理解题</h2>
        <div class="questions-list">
          <div 
            v-for="(question, qIndex) in questions" 
            :key="qIndex" 
            class="question-card"
            :class="{
              'completed': question.userAnswer !== null,
              'correct': isSubmitted && question.userAnswer === question.correctAnswer,
              'incorrect': isSubmitted && question.userAnswer !== null && question.userAnswer !== question.correctAnswer
            }"
          >
            <div class="question-number">问题 {{ qIndex + 1 }}:</div>
            <div class="question-text">{{ question.text }}</div>

            <div class="options">
              <label 
                v-for="(option, optIndex) in question.options" 
                :key="optIndex"
                class="option"
                :class="{
                  'selected': question.userAnswer === optIndex,
                  'correct': isSubmitted && optIndex === question.correctAnswer,
                  'incorrect': isSubmitted && question.userAnswer === optIndex && optIndex !== question.correctAnswer
                }"
              >
                <input 
                  type="radio" 
                  name="question-{{ qIndex }}"
                  :checked="question.userAnswer === optIndex"
                  @change="handleAnswer(qIndex, optIndex)"
                  :disabled="isSubmitted"
                >
                <span class="option-letter">{{ String.fromCharCode(65 + optIndex) }}</span>
                <span class="option-content">{{ option }}</span>
              </label>
            </div>

            <!-- 答案解析（提交后显示） -->
            <div v-if="isSubmitted" class="explanation">
              <strong>解析：</strong>{{ question.explanation }}
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button 
            @click="handleSubmit" 
            class="submit-btn"
            :disabled="isSubmitted || completedCount < 3"
          >
            提交答案
          </button>
          <button 
            @click="handleReset" 
            class="reset-btn"
            :disabled="isSubmitted || completedCount === 0"
          >
            重新开始
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import {Refresh, VideoPause, VideoPlay, ZoomIn, ZoomOut} from "@element-plus/icons-vue";

// 文章标题
const articleTitle = "The Importance of Forests";

// 文章内容
const articleContent = [
  "Forests are one of the most important natural resources on our planet. They cover about 30% of the Earth's land surface and play a crucial role in maintaining the balance of nature. Forests provide habitat for millions of species, including plants, animals, and insects, making them biodiversity hotspots.",
  "One of the key functions of forests is their ability to produce oxygen. Through the process of photosynthesis, trees absorb carbon dioxide and release oxygen, which is essential for all living beings. This also helps in reducing the amount of greenhouse gases in the atmosphere, thus mitigating the effects of climate change.",
  "Forests also play a vital role in the water cycle. They help regulate rainfall patterns and prevent soil erosion. The roots of trees hold the soil together, reducing the risk of floods and landslides. Additionally, forests act as natural water filters, purifying groundwater as it passes through the soil.",
  "For humans, forests provide numerous resources such as timber, medicinal plants, and food. Many communities around the world depend on forests for their livelihood. However, it's important to use these resources sustainably to ensure that forests continue to thrive for future generations.",
  "Unfortunately, deforestation is a major threat to our forests. Every year, large areas of forest are cleared for agriculture, logging, and urbanization. This not only destroys habitats but also contributes to climate change. It's crucial that we take steps to protect and restore our forests through reforestation efforts and sustainable practices.",
  "Protecting forests is not just the responsibility of governments and organizations; it's a collective effort. Individuals can contribute by reducing their use of wood products, supporting sustainable brands, and participating in tree-planting activities. By working together, we can ensure that forests continue to provide their invaluable services to our planet."
];

// 阅读理解题目（5题）
const questions = ref([
  {
    text: "What percentage of the Earth's land surface is covered by forests?",
    options: [
      "About 20%",
      "About 30%",
      "About 40%",
      "About 50%"
    ],
    correctAnswer: 1,
    explanation: "文章第一段明确提到：'They cover about 30% of the Earth's land surface'，因此正确答案是约30%。",
    userAnswer: null
  },
  {
    text: "How do forests help in reducing climate change?",
    options: [
      "By producing oxygen through photosynthesis",
      "By increasing greenhouse gases",
      "By absorbing carbon dioxide",
      "By regulating rainfall patterns"
    ],
    correctAnswer: 2,
    explanation: "文章第二段指出树木通过光合作用吸收二氧化碳，减少大气中的温室气体，从而缓解气候变化，因此正确答案是吸收二氧化碳。",
    userAnswer: null
  },
  {
    text: "What role do forests play in the water cycle?",
    options: [
      "They increase soil erosion",
      "They regulate rainfall patterns",
      "They prevent photosynthesis",
      "They reduce biodiversity"
    ],
    correctAnswer: 1,
    explanation: "文章第三段提到森林有助于调节降雨模式并防止土壤侵蚀，因此正确答案是调节降雨模式。",
    userAnswer: null
  },
  {
    text: "Which of the following is NOT mentioned as a resource provided by forests?",
    options: [
      "Timber",
      "Medicinal plants",
      "Fossil fuels",
      "Food"
    ],
    correctAnswer: 2,
    explanation: "文章第四段提到森林提供木材、药用植物和食物，但未提及化石燃料，因此正确答案是化石燃料。",
    userAnswer: null
  },
  {
    text: "What is a major threat to forests according to the passage?",
    options: [
      "Reforestation",
      "Deforestation",
      "Sustainable practices",
      "Tree-planting activities"
    ],
    correctAnswer: 1,
    explanation: "文章第五段明确指出'Unfortunately, deforestation is a major threat to our forests'，因此正确答案是森林砍伐。",
    userAnswer: null
  }
]);

// 状态管理
const isSubmitted = ref(false);

// 计算已完成题目数量
const completedCount = computed(() => {
  return questions.value.filter(q => q.userAnswer !== null).length;
});

// 计算得分
const score = computed(() => {
  const correctCount = questions.value.filter(q => q.userAnswer === q.correctAnswer).length;
  return correctCount * 20;
});

// 处理答案选择
const handleAnswer = (questionIndex, optionIndex) => {
  if (!isSubmitted.value) {
    questions.value[questionIndex].userAnswer = optionIndex;
  }
};

// 提交答案
const handleSubmit = () => {
  isSubmitted.value = true;
};

// 重置答题
const handleReset = () => {
  questions.value.forEach(q => {
    q.userAnswer = null;
  });
  isSubmitted.value = false;
};

//播放整段文章
function audioMessage() {
  window.speechSynthesis.resume();
  const speech = new SpeechSynthesisUtterance();
  // speech.voice = window.speechSynthesis.getVoices()[193]
  speech.text = articleContent.toString();
  speech.lang = "en-US";
  speech.volume = 1;
  speech.rate = 0.7;
  speech.pitch = 1;
  window.speechSynthesis.speak(speech);
}

function stopMessage() {
  window.speechSynthesis.cancel();
}


// 字体大小相关配置
const baseSize = 16; // 默认基础字体大小
const minSize = 12;  // 最小字体大小
const maxSize = 28;  // 最大字体大小
const step = 2;      // 每次调整的步长

// 当前字体大小
const currentSize = ref(baseSize);

// 增大字体
const increaseFontSize = () => {
  if (currentSize.value < maxSize) {
    currentSize.value += step;
  }
};

// 减小字体
const decreaseFontSize = () => {
  if (currentSize.value > minSize) {
    currentSize.value -= step;
  }
};

// 重置字体大小
const resetFontSize = () => {
  currentSize.value = baseSize;
};
</script>

<style scoped>
.reading-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  line-height: 1.8;
}

/* 头部样式 */
.page-header {
  padding: 20px;
  color: black;
  border-radius: 8px;
  margin-bottom: 10px;
}

.page-header h1 {
  margin: 0 0 15px 0;
  font-weight: 600;
}

.quiz-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 14px;
}

.separator {
  color: #bbb;
}

.score {
  color: #4cd964;
  font-weight: 500;
}

/* 左右布局容器 */
.content-wrapper {
  display: flex;
  gap: 30px;
  height: calc(100vh - 180px);
}

/* 左侧文章区域 */
.article-section {
  flex: 1;
  background-color: #fff;
  border: solid 1px #ddd;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  position: relative; /* 关键：父容器设为相对定位 */
  flex-direction: column;
}

.article-content::-webkit-scrollbar {
  width: 1px; /* 滚动条宽度 */
}

.article-content::-webkit-scrollbar-track {
  background: transparent; /* 透明轨道 */
}

.article-content::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0); /* 初始透明 */
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.article-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
  /* 隐藏滚动条但保留滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.article-content p {
  margin: 0 0 18px 0;
  text-align: justify;
}

/* 右侧题目区域 */
.questions-section {
  flex: 0 0 550px;
  background-color: #fff;
  border: solid 1px #ddd;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.questions-section h2 {
  margin-top: 0;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.questions-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 25px;
  /* 隐藏滚动条但保留滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.questions-list::-webkit-scrollbar {
  width: 1px; /* 滚动条宽度 */
}

.questions-list::-webkit-scrollbar-track {
  background: transparent; /* 透明轨道 */
}

.questions-list::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0); /* 初始透明 */
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.question-card {
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  background-color: #f8fafc;
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
}

.question-card.completed {
  border-left-color: #3498db;
}

.question-card.correct {
  border-left-color: #2ecc71;
  background-color: #f0fff4;
}

.question-card.incorrect {
  border-left-color: #e74c3c;
  background-color: #fff5f5;
}

.question-number {
  font-weight: bold;
  margin-bottom: 10px;
  color: #2c3e50;
  font-size: 16px;
}

.question-text {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #1e293b;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 5px;
}

/* 右上角按钮组 */
.top-right-buttons {
  position: absolute; /* 绝对定位，相对于父容器 */
  top: 10px;          /* 距离顶部10px */
  right: 10px;        /* 距离右侧10px */
  display: flex;      /* 按钮横向排列 */
  gap: 8px;           /* 按钮之间的间距 */
}

/* 按钮样式 */
.action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: #f5f5f5;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #e0e0e0;
  color: #333;
}

.action-btn.edit:hover {
  background: #e6f7ff;
  color: #1890ff;
}

.action-btn.delete:hover {
  background: #fff2f0;
  color: #f5222d;
}

.action-btn.setting:hover {
  background: #fffbe6;
  color: #faad14;
}

.option {
  display: flex;
  align-items: center;
  padding: 5px 15px;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option:hover:not(:has(input:disabled)) {
  background-color: #eff6ff;
  border-color: #93c5fd;
}

.option input {
  margin-right: 12px;
  width: 16px;
  height: 16px;
}

.option-letter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  background-color: #e9ecef;
  color: #495057;
  border-radius: 4px;
  margin-right: 12px;
  font-weight: 600;
}

.option-content{
  font-size: 12px;
}

.option.selected {
  background-color: #dbeafe;
  border-color: #3b82f6;
}

.option.selected .option-letter {
  background-color: #3b82f6;
  color: white;
}

.option.correct {
  background-color: #dcfce7;
  border-color: #2ecc71;
}

.option.correct .option-letter {
  background-color: #2ecc71;
  color: white;
}

.option.incorrect {
  background-color: #fee2e2;
  border-color: #ef4444;
}

.option.incorrect .option-letter {
  background-color: #ef4444;
  color: white;
}

.explanation {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #e2e8f0;
  font-size: 15px;
  color: #4b5563;
}

/* 按钮样式 */
.action-buttons {
  display: flex;
  gap: 15px;
}

.submit-btn, .reset-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.submit-btn {
  background-color: #3498db;
  color: white;
}

.submit-btn:hover:not(:disabled) {
  background-color: #2980b9;
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.submit-btn:disabled {
  background-color: #a0c4e7;
  cursor: not-allowed;
}

.reset-btn {
  background-color: #f1f3f5;
  color: #495057;
}

.reset-btn:disabled {
  background-color: #a0c4e7;
  cursor: not-allowed;
}

.reset-btn:hover {
  background-color: #a0c4e7;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 滚动条样式优化 */
.article-content::-webkit-scrollbar,
.questions-list::-webkit-scrollbar {
  width: 6px;
}

.article-content::-webkit-scrollbar-track,
.questions-list::-webkit-scrollbar-track {
  background: transparent;
}

.article-content::-webkit-scrollbar-thumb,
.questions-list::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

.article-content::-webkit-scrollbar-thumb:hover,
.questions-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(107, 114, 128, 0.7);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-wrapper {
    flex-direction: column;
    height: auto;
  }
  
  .questions-section {
    flex: none;
    width: 100%;
  }
}
</style>